<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		*{
			padding:0%;
			margin:0%;
		}
		.calendar{
			width:600px;
			height:600px;
			margin:0 auto;
		}
		.calender-header{
			width:600px;
			height:30px;
			
			position: absolute;
			top:0px;
			left:700px;
		}		
		.select-year{
			width:200px;
			height:30px;
			font-size:30px;
			font-weight: bold;
			color:#b80000;
			position: absolute;
			top:5px;
			left:800px;
		}
		.select-month{
			width:200px;
			height:40px;
			font-size:30px;
			font-weight: bold;
			color:#b80000;
			position: absolute;
			top:0px;
			left:500px;
		}
		#s_year{
			width: 100px;
			height:40px;
			border:none;
			font-size:30px;
			font-weight: bold;
			color:#b80000;
			background-color: #ffffff;
		}
		#s_month{
			width: 100px;
			height:40px;
			border:none;
			font-size:30px;
			font-weight: bold;
			color:#b80000;
			background-color: #ffffff;
		}
		.calendar-main{
			width:600px;
			height:600px;
			position: absolute;
			top:50px;
		}
		.week{
			width:600px;
			height:70px;
			background-color:#b80000;
		}
		.week ul{
			font-size:30px;
			color: #ffffff;
			font-weight: bold;
			box-sizing:border-box;
		}
		.week ul>li{
			list-style:none;
			display: block;
			width:85px;
			height:70px;
			line-height: 70px;
			float: left;
			box-sizing:border-box;
			text-align: center;
		}
		.date{
			width:600px;
			height:530px;
			background-color: #ffffff;
			border-left: 1px solid #909090;
			border-right:1px solid #909090;
			border-bottom:1px solid #909090;
		}
		.date ul{			
			color:#000000;
			box-sizing:border-box;
		}
		.date ul>button{
			font-size: 30px;
			list-style: none;
			display:inline-block;
			width:85px;
			height:85px;
			line-height: 85px;
			float:left;
			box-sizing:border-box;
			text-align: center;
			background-color: #ffffff;
			border:none;
		}
		.date ul>button:hover{
			width:85px;
			height:85px;
			background-color:#9a9a9a;
			border-radius: 50%; 
		}
		.date ul>button:visited{
			width:85px;
			height:85px;
			background-color:#b80000; 
			color:#ffffff;
		}
		.date ul>li{
			list-style: none;
			display:block;
			width:85px;
			height:85px;
			line-height: 85px;
			float:left;
			box-sizing:border-box;
			text-align: center;
			
		}
		
 
	</style>
</head>
<body>
	<div class="calendar">
		<div class="calendar-header">
			<div class="select-year" id="select_year">下一月
				<button id="s_year" ></button>
			</div>
			<div class="select-month" id="select_month">上一月
				<button id="s_month"></button>
			</div>	

				
		</div>
		<div class="calendar-main">
			<div class="week">
				<ul>
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li>六</li>
					<li>日</li>
				</ul>
				
			</div>
			<div class="date">
				<ul id="days">
      			</ul>
			</div>
		</div>
	</div>
	<script>
		var month_runnian=[31,29,31,30,31,30,31,31,30,31,30,31];
		var month_pingnian=[31,28,31,30,31,30,31,31,30,31,30,31];
		var month_name=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
		var tian=document.getElementById("days");
		var s_year=document.getElementById("s_year");
		var s_month=document.getElementById("s_month");
		var syear=document.getElementById("select_year");
		var smonth=document.getElementById("select_month");

		var use_date=new Date();
		var use_year=use_date.getFullYear();
		var use_month=use_date.getMonth();
		var use_day=use_date.getDate();

		function dayStart(month,year) {
			var tmpDate=new Date(year,month,1)
			return(tmpDate.getDay());
		}

		function daysMonth(month,year) {
			if((year%4==0&&year%100!=0)||(year%400==0)){
				return(month_runnian[month]);
			}else{
				return(month_pingnian[month]);
			}
		}

		function refreshDate() {
			var str="";
			var totalDay=daysMonth(use_month,use_year);
			var firstDay=dayStart(use_month,use_year);
			for (var i = 1; i <= firstDay; i++) {
				str += "<li>"+"</li>";
			}
			var textColor
		

			var useclass;
			for (var i = 1; i <= totalDay; i++) {
				console.log(use_year+""+use_month+""+use_day);
				console.log(use_date.getFullYear()+""+use_date.getMonth()+""+use_date.getDay());
				if ((use_year<use_date.getFullYear())||(use_year==use_date.getFullYear()&&use_month<use_date.getMonth())||(use_year==use_date.getFullYear()&&use_month==use_date.getMonth()&&i<use_day)) {
					useclass=" class='select_week'";
				}else if(use_year==use_date.getFullYear()&&use_month==use_date.getMonth()&&i==use_day){
					useclass=" class='select_date'";
				}else{
					useclass==" class='date'";
				}
				str+="<button>"+"<li "+useclass+">"+i+"</li>"+"</button>";
			}
			tian.innerHTML=str;
			s_month.innerHTML=use_year;
			s_year.innerHTML=month_name[use_month];
			
		}
		refreshDate();
		s_month.onclick=function (e) {
			e.preventDefault();
			use_month--;
			if (use_month<0) {
				use_year--;
				use_month=11;
			}
			refreshDate();
		}
		s_year.onclick=function (e) {
			e.preventDefault();
			use_month++;
			if(use_month>11){
				use_month=0;
				use_year++;
			}
			refreshDate();
			
		}

	</script>
</body>
</html>